<template>
    <keep-alive include="List">
      <component
        :is="CurrentComponent[activePage]"
        :orgStartType="orgStartType"
        ref="pageRef"
      ></component>
    </keep-alive>
  </template>
  
  <script setup>
  import {
    ref,
    reactive,
    provide,
    onBeforeMount,
    markRaw,
    defineAsyncComponent
  } from 'vue'
  import { useRouter } from 'vue-router'
  
  const CurrentComponent = reactive({
    view: markRaw(
      defineAsyncComponent(() => import('./components/view.vue'))
    ),
    dataView: markRaw(
      defineAsyncComponent(() => import('./components/data-view.vue'))
    ),
    orgList: markRaw(
      defineAsyncComponent(() => import('./components/org-list.vue'))
    )
  })
  const activePage = ref('view')
  const orgStartType = ref()
  const changeComponents = (components,val) => {
    activePage.value = components
    orgStartType.value = val
  }
  
  provide('changeComponents', changeComponents)
  
  onBeforeMount(() => {
    
  })
  </script>
  <style scoped></style>
  